<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <style>
        * {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav .nav-content {
            width: 750px;
            margin: 0 auto;
        }
        .nav .nav-content .nav-item .logo-content img{
            width: 222px;
            height: 114px;
            position: absolute;
            left: -106px;
            top: -12px;
        }
        .nav .nav-content .nav-item .logo-content{
            width: 100px;
            height: 85px;
            overflow: hidden;
            position: relative;
        }
        @font-face{
            font-family: QS-R;
            src:url(/font/Quicksand-Regular.ttf);
        }

        @font-face{
            font-family: QS-B;
            src:url(/font/Quicksand-Bold.ttf);
        }

        @font-face{
            font-family: QS-M;
            src:url(/font/Quicksand-Medium.ttf);
        }

        .nav .nav-content .nav-list {
            width: 750px;
            height: 85px;
            display: flex;
            align-items:center;
            justify-content :space-between;
            /* background-color: #F5F5F5; */

        }

        .nav .nav-content .nav-item {
            font-family: QS-M;
            font-size: 24px;
            /* float: left; */

        }

        .nav .nav-content .nav-item:hover {
            cursor: pointer;
            color: blue;
        }

        .choseed-btn {
            color: blue;
        }



    </style>
    <style>
        .course-bord-content {
            width: 750px;
            display: flex;
            flex-wrap:wrap;
            margin: 0 auto;
            justify-content: space-around;

        }
        .course-bord-content .course-item {
            width: 365px;
            height: 200px;
            /* background-color: #4472C4; */
            margin: 10px 0;
            border-radius: 10px;
        }

        .course-bord-content .course-item:hover {
            cursor: pointer;
            box-shadow: 0 1px 3px rgb(0 0 0 / 2%), 0 16px 32px -4px rgb(0 0 0 / 17%);
            transform: translateY(-1px);

        }

        .course-bord-content .course-item .split-line{

            height: 130px;
            position: relative;
        }
        .course-bord-content .course-item .split-line .split-line-black {
            position: absolute;
            top: 130px;
        }
        .course-bord-content .course-item .course-name{
            font-family: QS-M;
            text-align: center;
            line-height: 64px;
            font-size: 24px;
        }
    </style>
    <style>
        .content {
            width: 700px;
            margin: 0 auto;
            display: flex;
            justify-content:center;
        }
        .test-content {
            width: 250px;
            border: 5px solid #004add;
            margin-right: 80px;
            height: 350px;
            font-size: 20px;
            font-family: QS-B;
            text-align: center;
        }

        .task-content {
            width: 250px;
            height: 350px;
            border: 5px solid #004add;
            font-size: 20px;
            font-family: QS-B;
            text-align: center;
        }
        .button {
            width:126px;
            height:30px;
            color:white;
            background-color:#004aad;
            border:none;
            border-radius:8px;
            font-family:QS-M;
            font-size: 20px;
        }
        .btn-bar {
            margin-top: 50px;
            margin-left: 836px;
        }

        .title {
            font-size: 20px;
            font-family: QS-B;
        }

    </style>
</head>
<body >
<div class="nav">
    <div class="nav-content">
        <ul class="nav-list">
            <li class="nav-item">
                <div class="logo-content">
                    <img src="/image/LOGO.png" alt="">
                </div>
            </li>
            <li class="nav-item" >
                <a style="color: black" href="/courseBordTeacher">Course board</a>
            </li>

            <li class="nav-item">
                <a href="/courseBordTeacher/crades">GradesMarking</a>
            </li>
            <li class="nav-item"><a  style="color:black;" href="/drive">Drive</a></li>
            <li class="nav-item"  onclick="document.location='accountInfo'">
                <a href="/accountInfo">
                    <svg  t="1639982246046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8917" width="48" height="48"><path style="fill: #004add" d="M619.064182 504.57971c91.163561-42.401656 154.766046-133.565217 154.766046-239.569358C773.830228 118.724638 655.10559 0 508.819876 0S243.809524 118.724638 243.809524 265.010352c0 106.004141 63.602484 197.167702 154.766045 239.569358C169.606625 555.461698 0 758.989648 0 1002.799172v21.200828h1017.639752v-21.200828c0-243.809524-169.606625-447.337474-398.57557-498.219462z" p-id="8918" fill="#1296db"></path></svg>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="title" style="width: 700px;margin: 0 auto" th:text="|${courseId} G${courseGroup}|">
    SSK3313 G4
</div>
<div class="split-line" style="width:700px;border:3px #004aad solid;margin-top: 25px; margin: 0 auto"></div>
<div class="content" style="margin-top: 25px;">

    <div class="test-content">
        <div class="test-title">Test</div>
        <div th:each="task:${testList}">
            <a th:href="@{/grade/{uniId}/{courseId}/{courseGroup}/{topicId}/{itemId}(topicId=${task.topicId},uniId=${uniId},courseId=${courseId},courseGroup=${courseGroup},itemId=${task.itemId})}" th:text="${task.itemTitle}"></a>
        </div>
    </div>
    <div class="task-content">
        <div class="task-title">Task</div>
        <div th:each="task:${taskList}">
            <a th:href="@{/grade/{uniId}/{courseId}/{courseGroup}/{topicId}/{itemId}(topicId=${task.topicId},uniId=${uniId},courseId=${courseId},courseGroup=${courseGroup},itemId=${task.itemId})}" th:text="${task.itemTitle}"></a>
        </div>
    </div>

</div>
<div class="btn-bar">
    <a th:href="@{/courseBordTeacher/crades}"><input style="line-height: 10px;" type="button" id="back" class="button back" Value="Back"></a>
</div>
</body>
</html>